<template>
    <div>
        <!-- <h3>校园超市</h3> -->
        <div class="sear">
            <van-icon name="search" />
            <input type="text" placeholder="请输入搜索商品">
        </div>
        <div class="classify">
            <div class="left">
                <li v-for="item, index in classsify" :key="index" @click="tab(index)"
                    :class="{ active: leftIndex == index }">
                    {{ item.title }}
                </li>
            </div>
            <div class="right">
                <div class="tab" v-if="classsify[leftIndex]?.children?.length > 0">
                    <li v-for="item, index in classsify[leftIndex].children " @click="changeTab(index)"
                        :class="{ active: rightIndex == index }">{{ item.name }}</li>
                </div>
                <div v-else>暂无数据</div>
                <li v-for="ele in rightList" :key="ele.id">
                    <van-card :num="ele.stock" :price="ele.price" desc="库存" :title="ele.name"
                        :thumb="ele.cover">
                        <template #tags>
                            <van-tag plain type="danger">{{ ele.volume }}</van-tag>
                            <van-tag plain type="danger">标签</van-tag>
                        </template>
                    </van-card>
                </li>
            </div>
        </div>
    </div>
</template>

<script>
import { getShopType,getSelectType } from '@/api'
export default {
    data() {
        return {
            leftIndex: 0,
            rightIndex: 0,
            classsify: [],
            rightList: []
        }
    },
    mounted() {
        this.onClassList()
        this.onRightList();
    },
    methods: {
        async onClassList() {
            let res = await getShopType();
            console.log(res);
            let { data } = res
            this.classsify = data
        },
        tab(index) {
            this.leftIndex = index;
            this.rightIndex=0;
            this.onRightList()
            // this.rightList = this.classsify[index].children;
        },
        changeTab(index) {
            this.rightIndex = index;
            this.onRightList()
        },
        async onRightList() {
            let {leftIndex,rightIndex}=this
            let type_id=this.classsify[leftIndex].id;
            let category_id=this.classsify[leftIndex]?.children[rightIndex]?.id
            let res = await getSelectType({type_id,category_id});
            let { data } = res;
            this.rightList = data
        },
    }
}

</script>

<style lang='scss'>
.sear {
    margin: 5px auto;
    width: 90%;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #ccc;
    line-height: 30px;

    .van-icon {
        vertical-align: middle;
        margin-right: 10px;
    }

    input {
        height: 20px;
        border: none;
        outline: none;
        font-size: 14px;
    }
}

.classify {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
        width: 100px;
        text-align: center;
        line-height: 40px;
        height: 500px;
        border-right: 1px solid #ccc;

        li {
            font-size: 14px;
            padding: 0 10px;
            border-radius: 20px;
            line-height: 30px;
            margin: 10px;
        }

        .active {
            background: rgb(236, 13, 13);
            color: #fff;
        }
    }

    .right {
        flex: 1;
        overflow-y: auto;
        .tab {
            position: absolute;
            top: 90px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            li {
                margin-left: 10px;
            }
            .active {
                color: rgb(236, 13, 13);
            }
        }
    }
}</style>
